<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>GeoPoint</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script
      include="language,l7"
      src="./static/libs/include-mapboxgl-local.js"
    ></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 600px;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      import { Scene, LineLayer } from '@antv/l7';
      //一定要去mapbox注册一个key,这个key会失效的
      mapboxgl.accessToken =
        "pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA";
      function initMap() {
        const scene = new Scene({
          id: "map",
          map: new Mapbox({
            style: "light",
            pitch: 0,
            center: [107.054293, 35.246265],
            zoom: 4.056,
          }),
        });
      }
    </script>
  </body>
</html>
